<template>
    <el-dialog title="账单记录" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-table size="small" header-cell-class-name="table_header_cell" :data="list" v-loading="isLoading" height="360">
            <!-- <el-table-column prop="bill_id" label="ID" width="100">
            </el-table-column> -->
            <el-table-column prop="xuhao" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="order_no" label="订单编号" width="200">
                <template slot-scope="scope">
                    {{ scope.row.order_info.order_no }}
                </template>
            </el-table-column>
            <el-table-column prop="supply_order_no" label="包裹编号">
            </el-table-column>
            <el-table-column prop="income_money" label="订单金额">
                <template slot-scope="scope">
                    <span style="color:#67C23A">￥{{ scope.row.order_money ? scope.row.order_money:'0.00' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="income_money" label="手续费">
                <template slot-scope="scope">
                    <span style="color:#409EFF">￥{{ scope.row.service_money }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="income_money" label="入账金额">
                <template slot-scope="scope">
                    <span style="color:#F56C6C">￥{{ scope.row.income_money }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="订单创建时间">
                <template slot-scope="scope">
                    {{ scope.row.order_info.create_time }}
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <pagination v-if="searchForm.total" :total="searchForm.total" :page.sync="searchForm.page" :limit.sync="searchForm.limits" @pagination="getList" />
        </div>
    </el-dialog>
</template>

<script>
import { billRecordList } from '../../../api/finance';
export default {
    name: "supplyBillRecord",
    props: {},
    data() {
        return {
            visible: false,
            isLoading: false,
            searchForm: {
                page: 1,
                limits: 15,
                total: 0,
                bill_id: ''
            },
            list: []
        };
    },
    created() {

    },
    methods: {
        add() {
            this.visible = true;
        },
        reload() {
            this.searchForm.page = 1;
            this.list = [];
            this.getList();
        },
        getList() {
            const that = this;
            that.isLoading = true;
            billRecordList(this.searchForm).then(res => {
                that.isLoading = false;
                if (res.code == 0) {
                    that.list = res.data.data;
                    that.searchForm.total = res.data.total
                }
            })
        },
        close() {
            this.visible = false;
        },
    },
};
</script>

<style scoped>
/deep/ .el-dialog {
    width: 900px;
}

/deep/ .el-dialog__body {
    padding: 20px 20px;
}
</style>